<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="../js/vue.js">
    </script>
    <style>
        .v-cloak {
            display: none;
        }
    </style>
</head>
<body>

<div id="root">

    <button onclick="saveData()">新增</button>
    <button onclick="modifyData()">修改</button>
    <button onclick="deleteData()">删除</button>
    <button onclick="clearData()">清空</button>
</div>

<script type="text/javascript">
    function saveData() {
        const data = {
            name: '张三',
            age: 18
        }
        localStorage.setItem('data', JSON.stringify(data))
        sessionStorage.setItem('data', JSON.stringify(data))
    }
    function modifyData() {
        const data = {
            name: '李四',
            age: 20
        }
        localStorage.setItem('data', JSON.stringify(data))
        sessionStorage.setItem('data', JSON.stringify(data))
    }
    function deleteData() {
        localStorage.removeItem('data')
        sessionStorage.removeItem('data')
    }
    function clearData() {
        localStorage.clear()
        sessionStorage.clear()
    }


</script>
</body>

</html>